<template>
  <div class="column-detail-page w-75 mx-auto">
    <div class="column-info row mb-4 border-bottom pb-4 aligin-items-centter">
      <div class="col-3 text-center">
        <img :src="column.avatar.url" alt="" class="rounded-circle border" />
      </div>
      <div class="col-9">
        <h4>{{ column.title }}</h4>
      </div>
    </div>
    <PostList :list="list"></PostList>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import PostList from "../components/PostList.vue"
import { useStore } from "vuex";
export default defineComponent({
  components: {
    PostList,
  },
  setup() {
    // 他是一个函数，调用之后可以返回相应的对象
    const route = useRoute();
    const store = useStore();
    const currenId = route.params.id;
    onMounted(()=>{
      //专栏详情
      store.dispatch('fetchColumn',currenId)
      //文章列表
      store.dispatch('fetchPosts',currenId)
    })
    const column = computed(() => store.getters.getColumnById(currenId));
    const list = computed(() => store.getters.getPostById(currenId));
    console.log(column);
    return {
      column,
      list,
    }
  }
})
</script>

<style scoped></style>
